<template>
  <view class="contant">
    <view v-if="itemlists&&itemlists.length>0">
    <radio-group @change="radioChange">
      <label
        class="uni-list-cell uni-list-cell-pd"
        v-for="(item, index) in itemlists"
        :key="item.id"
      >
        <view class="flexCenter linebox">
          <view v-if="showConfirm">
            <radio
              color="#953B82"
              :value="item.id"
              :checked="item.id === current"
              style="transform: scale(0.7)"
            />
          </view>
          <view class="addressleft flex_1">
            <view class="flex">
              <view class="moren" v-if="item.defaulted==1">默认</view>
              <view class="name">{{item.consigneeName}}</view>
              <view class="name">{{item.consigneeMobile}}</view>
            </view>
            <view class="addresstext">{{item.province}}{{item.city}}{{item.area}}{{item.detailAddress}}</view>
          </view>
          <view class="addressright flex" v-if="showAdd">
            <view @tap.stop="jumpedit(item.id)" class="mR10 pd10">
              <u-icon name="edit-pen-fill" color="#000000" size="33"></u-icon>
            </view>
            <view @tap.stop="jumpdelet(item.id)" class="pd10">
              <u-icon name="trash" color="#000000" size="33"></u-icon>
            </view>
          </view>
        </view>
      </label>
    </radio-group>
  </view>
  <view v-else class="empbox">
    <view>
      <image
        class="emptyimg"
        :src="`${state.baseimgurl}/emptyimg.png`"
      >
      </image>
    </view>
    <view class="tipemty">您还没有添加地址</view>
  </view>
    <!-- 吸底工具栏 -->
    <view
      class="toolbar-height"
      :style="{ paddingBottom: safeAreaInsets?.bottom + 30 + 'px' }"
    ></view>
    <view
      v-if="showAdd || itemlists.length == 0"
      class="toolbar"
      :style="{ paddingBottom: safeAreaInsets?.bottom + 30 + 'px' }"
    >
      <view class="button-grounp">
        <view @tap="addsubmit" class="button payment-button"> 新增地址 </view>
      </view>
    </view>
    <view
      v-if="showConfirm && itemlists.length > 0"
      class="toolbar"
      :style="{ paddingBottom: safeAreaInsets?.bottom + 30 + 'px' }"
    >
      <view class="button-grounp">
        <view @tap="submit" class="button payment-button"> 确认 </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref,reactive,inject} from "vue";
const baseimgurl = inject("$baseimgurl");
import { onLoad, onShow } from "@dcloudio/uni-app";
import { fetchDetail } from '@/api/jianding'
import { memberAddressesList,memberAddressesDelete } from "@/utils/api";
import { createOrder } from '@/api/order'

const showConfirm = ref(false)
const showAdd = ref(true)
let orderNo = null
onLoad(options => {
  if (options.orderNo) {
    orderNo = options.orderNo
    showConfirm.value = true
    showAdd.value = false
  }
})
onShow(async () => {
  const {data} = await memberAddressesList();
  itemlists.value=data
});
const state = reactive({
  baseimgurl: baseimgurl,
});
const jumpedit = (id) => {
  uni.navigateTo({
    url: `/pages/me/addformaddress?id=${id}`,
  });
};
const addsubmit = () => {
  uni.navigateTo({
    url: "/pages/me/addformaddress",
  });
};
const jumpdelet=(id)=>{
  memberAddressesDelete({ids:[id]}).then(async(res) => {
    uni.$u.toast("删除成功");
    const {data} = await memberAddressesList();
    itemlists.value=data
  });
}
const itemlists = ref([]);
const current = ref(null);
const radioChange = (e) => {
  current.value = Number(e.detail.value)
}
const submit = async () => {
  if (current.value) {
    try {
      const { data } = await fetchDetail({orderNum: orderNo})
      createRecycleOrder(data)
    } catch(err) {
      console.error(err)
    }
  } else {
    uni.showToast({
      title: '请选择地址',
      icon: 'none',
    })
  }
}
const createRecycleOrder = async (data) => {
  let deliveryInfo = {}
  itemlists.value.map(item => {
    if (item.id == current.value) {
      deliveryInfo = item
    }
  })
  const params = {
    typeCode: 'RecycleOrder',
    form: {
      category: data.category, // 品类
      brandId: data.brandId, // 品牌
      productPicture: data.productPicture, // 图片
      fineness: "全新", // 成色
      description: data.applyRemark, // 商品描述
      orderDeliveryInfo: deliveryInfo,
      applyOrderNum: orderNo
    }
  }
  const { code, msg } = await createOrder(params)
  uni.$u.toast("操作成功")
  setTimeout(() => {
    uni.reLaunch({ url: '/pages/bar' })
  }, 500)
}
</script>
<style lang="scss">
page {
  background: #ffffff;
}
</style>
<style lang="scss" scoped>
.contant {
  padding: 24rpx;
}
.moren {
  background: #000000;
  font-size: 24rpx;
  color: #ffffff;
  margin-right: 14rpx;
  padding: 4rpx;
}
.addresstext {
  font-size: 25rpx;
  color: #666666;
  margin-top: 33rpx;
}
.name {
  margin-right: 10rpx;
  font-size: 25rpx;
  font-weight: 500;
  color: #212121;
}
.linebox {
  padding: 30rpx 0 40rpx 0;
  border-bottom: 2rpx solid #e6e6e6;
}
.toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--window-bottom));
  z-index: 2;
  height: 100rpx;
  padding: 14rpx 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  box-sizing: content-box;
  .button-grounp {
    display: flex;
    justify-content: center;
    text-align: center;
    line-height: 72rpx;
    font-size: 13px;
    color: #fff;

    .button {
      width: 490rpx;
      margin: 0 10rpx;
      border-radius: 72rpx;
    }

    .payment-button {
      background: #953b82;
      border-radius: 8rpx;
      &.disabled {
        opacity: 0.6;
      }
    }
  }
}
.toolbar-height {
  height: 100rpx;
  box-sizing: content-box;
}
.emptyimg{
  width: 236rpx;
  height: 217rpx;
}
.tipemty{
  margin-top: 53rpx;
}
.empbox{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 80vh;
}
</style>
